import { FC, createContext, useState } from 'react';
import ThemeButton from './ThemeButton';
const themes = {
  light: {
    fore: '#000',
    background: '#eee',
  },
  dark: {
    fore: '#fff',
    background: '#222',
  },
};
export const ThemeContext = createContext(themes.light);

const Demo: FC = () => {
  const [theme, setTheme] = useState(themes.light);
  function toDark() {
    setTheme(themes.dark);
  }
  return (
    <ThemeContext.Provider value={theme}>
      <div>
        <p>Context Demo</p>
        <div>
          <button onClick={toDark}>dark</button>
        </div>
        <ThemeButton />
      </div>
    </ThemeContext.Provider>
  );
};

export default Demo;
